<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->


<dom-module id="shop-my">
    <template>
        <style include="shop-common-styles">
            paper-icon-item div[slot=item-icon]{
                padding: 10px 10px 10px 0px;
            }
            paper-icon-item div[slot=item-icon] img{
                width:100%;
            }
            paper-icon-item iron-icon{
                color: #666;
            }
            paper-item-body div[secondary]{
                font-size: 12px;
            }
            paper-listbox a{
                color: #000000;
                text-decoration: none;
            }
            .arrow{
                width: 25px;
                height: 25px;
            }
        </style>
        <plugin-xhr id="api" url="[[app.apiHost]]/plugin.app.call"></plugin-xhr>
        <plugin-xhr id="count_payment_pending" url="[[app.apiHost]]/my.trade.count.payment.pending" response="{{count_payment_pending}}"></plugin-xhr>
        <plugin-xhr id="count_delivered" url="[[app.apiHost]]/my.trade.count.delivered" response="{{count_delivered}}"></plugin-xhr>
        <plugin-xhr id="count_coupon_expiration" url="[[app.apiHost]]/my.coupon.count.expiration" response="{{count_coupon_expiration}}"></plugin-xhr>
        <plugin-xhr id="count_coupon_available" url="[[app.apiHost]]/my.coupon.count.available" response="{{count_coupon_available}}"></plugin-xhr>
        <plugin-xhr id="xhr_account_get_current" url="[[app.apiHost]]/account.get.current" response="{{account}}" response-property="result"></plugin-xhr>
        <plugin-content-view visible="{{visible}}" contents="{{layout.my_top}}" width="[[pageWidth]]"></plugin-content-view>
        <paper-listbox>
            <a href="{{rootPath}}my-trade">
            <paper-icon-item>
                <div slot="item-icon">
                    <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z" class="style-scope iron-icon"></path></g></svg>
                </div>
                <paper-item-body two-line>
                  <div>我的订单</div>
                  <div secondary>[[count_payment_pending.result.count]]个订单待支付，[[count_delivered.result.count]]个订单待发货</div>
                </paper-item-body>
                <div class="arrow">
                    <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" class="style-scope iron-icon"></path></g></svg>
                </div>
              </paper-icon-item>
            </a>
            <a href="{{rootPath}}my-coupons">
                <paper-icon-item>
                <div slot="item-icon">
                  <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><path d="M20 2H4c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h4v5l4-2 4 2v-5h4c1.11 0 2-.89 2-2V4c0-1.11-.89-2-2-2zm0 13H4v-2h16v2zm0-5H4V4h16v6z" class="style-scope iron-icon"></path></g></svg>
                </div>
                <paper-item-body two-line>
                  <div>我的优惠卷</div>
                  <div secondary>[[count_coupon_available.result.count]]张优惠卷可用
                    <template is="dom-if" if="[[!_equal(count_coupon_expiration.result.count,0)]]">
                        ，[[count_coupon_expiration.result.count]]张即将过期
                      </template>
                    </div>
                </paper-item-body>
                <div class="arrow">
                    <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" class="style-scope iron-icon"></path></g></svg>
                </div>
              </paper-icon-item>
            </a>
            <a href="{{rootPath}}my-score">
                <paper-icon-item>
                <div slot="item-icon">
                  <img src="">
                  </div>
                <paper-item-body two-line>
                  <div>我的积分</div>
                  <div secondary>[[account.score]]个积分可用</div>
                </paper-item-body>
                <div class="arrow">
                    <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" class="style-scope iron-icon"></path></g></svg>
                </div>
              </paper-icon-item>
            </a>
        </paper-listbox>
        <plugin-content-view visible="{{visible}}" contents="{{layout.my_bottom}}" width="[[pageWidth]]"></plugin-content-view>
    </template>

    <script>
        class ShopMy extends PluginElement {

            static get is() {
                return 'shop-my';
            }

            static get properties() {
                return {

                    visible: {
                        type: Boolean,
                        observer: '_visibleChanged'
                    }
                }
            }
            ready(){
                super.ready();
                let dom = this;
                app.addEventListener("reload",function(e){
                    if(app.page=="my"){
                        dom._visibleChanged(true);
                    }
                });
            }
            _visibleChanged(visible) {
                if(visible){
                    this.$.count_payment_pending.param("app_id",app.appId).get();
                    this.$.count_delivered.param("app_id",app.appId).get();
                    this.$.count_coupon_expiration.param("app_id",app.appId).get();
                    this.$.count_coupon_available.param("app_id",app.appId).get();
                    this.$.xhr_account_get_current.get();
                }
            }
        }

        customElements.define(ShopMy.is, ShopMy);

    </script>

</dom-module>
